﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- saved from url=(0029)http://www.helpandmanual.com/ -->
<head> 
   <title>Overview</title> 
   <!-- Template design (c) copyright 2008-2009 by Tim Green and EC Software -->
   <meta name="generator" content="Help &amp; Manual" /> 
   <meta name="keywords" content="" />
   <meta name="description" content="Overview" />
   <meta name="copyright" content="© 2012 Kentico Software" /> 
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
   <link type="text/css" href="default.css" rel="stylesheet" /> 
   <link type="text/css" href="custom.css" rel="stylesheet" />

   <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
   <script type="text/javascript" src="nsh.js"></script>



         
   <!-- CSS set with project variables and local attributes --> 
   <style type="text/css" media="screen"> 
   body { background: #fff; } 
   #breadcrumbs {width: 100%; background-color: white; border-bottom: 1px solid #000; padding: 0px 0px 5px 15px;
   margin: 3px 0; font-size: 8pt; color: #000;}
   #breadcrumbs a { color: #000; text-decoration: none;}
   #breadcrumbs a:visited { color: #000; }
   #breadcrumbs a:hover { color: #098ae2; text-decoration: none; }
   .help-url { font-size: 10pt; font-family: Arial, Verdana, Helvetica, sans-serif; 
               color: #1f84e8; text-align: center; margin: 5px 20px 10px 0px; 
               padding-top: 14px; border-top: 1px solid #000;}
   .help-url a { color: #098ae2; text-decoration: none; }
   .help-url a:visited { color: #098ae2; }
   .help-url a:hover { color: #098ae2; text-decoration: underline; }
   .highlight {background: #ffff40;}
   .breadhead {padding: 5px 0px 0px 0px !important;}    
   #innerdiv   
   {   
   padding-left: 5px;
   }
   

   </style> 

<!-- Adjustment for IE -->
<!--[if lte IE 8]>
<style type="text/css">
.topichead { padding-right: 0; }
   
   
   	.breadhead {
	margin: 0;
	padding-right: 5px;
	}
   
   
</style>
<![endif]-->
   
<script type="text/javascript">
// Initialize the page 
addEvent(window, "load", nsrInit);
addEvent(window, "load", doResize);
addEvent(window, "resize", doResize);
addEvent(window, "load", toggleJump);

</script>


<script type="text/javascript">
function mailFB_custom() {
var headerText = unQuot("Feedback on: Kentico CMS 6.0 Context Help - Overview".replace('&nbsp;',''));
var fb1 = "mailto:" + escape('Kentico Support Team <support@kentico.com>') + "?subject=" + headerText;
var titlePath = unQuot("CMS Site Manager &gt; Development &gt; Inline controls &gt; Overview /");
var fb2 = "&body=Ref:%20" + titlePath + "%20ID:%20Inline_controls_overview%0A%0D%0A%0D" + unQuot("Dear Support Staff,") + "%0A%0D%0A%0D";
var fb = fb1 + fb2;
document.location.href=fb;
}
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-105987-4']);
  _gaq.push(['_setDomainName', '.kentico.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>        
<script type="text/javascript" src="helpman_topicinit.js"></script>
<!-- Redirect browser to frame page if page is not in the content frame. -->
<script type="text/javascript">
<!--
if (location.search.lastIndexOf("toc=0")<=0) {
  if (parent.frames.length==0) { parent.location.href="index.html?inline_controls_overview.htm"; }
  else { parent.quicksync('a2.4.9.1'); }
}
//-->
</script>
<script type="text/javascript" src="highlight.js"></script></head> 
<body onload="highlight();">
<div id="hmpopupDiv" style="visibility:hidden; position:absolute; z-index:1000; "></div>
<!--ZOOMSTOP-->

<div id="printheader">
<span id="printtitle">Kentico CMS 6.0 Context Help</span><br />
<p class="p_Heading1"><span class="f_Heading1">Overview</span></p>
</div>
<div id="idheader" style="border-bottom:1px solid #000;margin:0px 0px;"> 
<table id="breadtable" border="0" cellspacing="0" cellpadding="0" width="100%"> 
  <tr >
  <td align="left" class="breadhead" >
       <p id="breadcrumbs"><a href="mode_selection.htm"
        onmouseover="document.images.main.src='home_h.gif'" 
        onmouseout="document.images.main.src='home.gif'">
        <img name="main" src="home.gif" border="0" alt="Home topic" title="Home topic" /></a> 
        
        CMS Site Manager &gt; <a href="development.htm">Development</a> &gt; Inline controls:</p> 
  </td>
  </tr>
</table>
<table width="99%" border="0" cellspacing="0" cellpadding="0" id="headtable"> 

<!-- Script version of NavHeader -->
  <tr id="scriptNavHead" valign="middle" style="height: auto;"> 
    <td align="left" class="topichead" style="padding-left: 15px;"> 
    <p class="p_Heading1"><span class="f_Heading1">Overview</span></p>

    </td>
    <td align="center" width="20" class="idnav" valign="bottom">
     <a href="properties_form_control.htm"
        onmouseover="document.images.prev.src='button_prev_h.gif'" 
        onmouseout="document.images.prev.src='button_prev.gif'">
        <img name="prev" src="button_prev.gif" border="0" alt="Previous topic" title="Previous topic" /></a>
     
   </td>
   
   <td align="center" width="20" class="idnav" valign="bottom">
     <a href="inline_controls_list.htm"
        onmouseover="document.images.next.src='button_next_h.gif'" 
        onmouseout="document.images.next.src='button_next.gif'"><img name="next" src="button_next.gif" border="0" alt="Next topic" title="Next topic" /></a>
        
   </td>

   
   
   
   
   

     
   <td id="print-button" align="center" width="20" class="idnav" valign="bottom">
     <a href="javascript: print();" 
     onmouseover="document.images.printbutton.src='print_h.gif'" 
     onmouseout="document.images.printbutton.src='print.gif'"><img name="printbutton" border="0" alt="Print this topic" title="Print this topic" src="print.gif" /></a>
   </td>  
     
     

  
   <td id="mail-feedback" align="center" width="20" class="idnav" valign="bottom">
   <a href="#"
        onclick='mailFB_custom();'
        onmouseover="document.images.feedback.src='mail_h.gif'" 
        onmouseout="document.images.feedback.src='mail.gif'"><img name="feedback" src="mail.gif" border="0" alt="Mail us feedback on this topic!" title="Mail us feedback on this topic!" /></a>
   </td>
   
   <td width="4">&nbsp;</td>
  </tr>
<!-- End script navheader version -->

<!-- NoScript version of navheader -->

  <tr id="noScriptNavHead" valign="middle" style="height: auto;"> 
    <td align="left" class="topichead"> 
    <p class="p_Heading1"><span class="f_Heading1">Overview</span></p>

    </td>
    <td align="center" width="20" class="idnav" valign="bottom">
     <a href="properties_form_control.htm">
        <img src="button_prev.gif" border="0" alt="Previous topic" title="Previous topic" /></a>
     
   </td>
   
   <td align="center" width="20" class="idnav" valign="bottom">
     <a href="inline_controls_list.htm">
        <img src="button_next.gif" border="0" alt="Next topic" title="Next topic" /></a>
        
   </td>
   
   
   
  
   

     
     
   <td align="center" width="20" class="idnav" valign="bottom">
   <img border="0" alt="JavaScript is required for the print function" title="JavaScript is required for the print function" src="print_d.gif" />
   </td>
     
     
   
   <td align="center" width="20" class="idnav" valign="bottom">
   <a href="mailto:support@kentico.com?subject=Documentation%20feedback&body=Ref%20ID:%20Inline_controls_overview%0D%0D"><img src="mail.gif" border="0" alt="Mail us feedback on this topic!" title="Mail us feedback on this topic!" /></a>
   </td>
   
   <td width="4">&nbsp;</td>
  </tr>

<!-- End noscript navheader version -->
  </table>
<div id="autoTocWrapper"></div>
</div> 

<div id="idcontent"><div id="innerdiv">
<!--ZOOMRESTART-->
<p>Inline controls are user controls (ASCX) that can be placed into the text of editable regions using a special expression in format <span style="font-style: italic;">%%control:MyUserControl%%, </span>where <span style="font-style: italic;">MyUserControl</span> is the name of the inline control. The system dynamically loads the controls when the page is displayed on the live site.</p>
<p>&nbsp;</p>
<p>The controls may contain any functionality, such as "polls", "latest news", "mortgage calculator", "travel destination search", etc. The advantage of inline controls is that any content editor can place them anywhere into the text without programming knowledge.</p>
<p>&nbsp;</p>
<p class="p_Heading2" style="margin: 0px 0px 0px 0px;"><span class="f_Heading2">How to insert inline controls into text</span></p>
<p>&nbsp;</p>
<p>Inline controls can be inserted into text using the <span style="font-weight: bold;">Insert inline control</span> (<img src="fckinlinecontrols.png" width="13" height="13" border="0" alt="fckInlineControls">) button on the <a href="http://devnet.kentico.com/docs/6_0/devguide/wysiwyg_editor_overview.htm" target="_blank" class="weblink">WYSIWYG editor</a> toolbar. If the text is not edited in the WYSIWYG editor, you can insert inline controls by typing the <span style="font-style: italic;">%%control:MyUserControl%%</span> expressions manually. Only controls that have been registered in the system and assigned to the currently edited site can be inserted. This can be done at <span style="font-weight: bold;">Site Manager -&gt; Development -&gt; Inline controls</span>.</p>
<p>&nbsp;</p>
<p>The inline control may also have a single parameter. In this case, you must use one of the following expression formats:</p>
<p>&nbsp;</p>
<div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 7px;"><table border="0" cellpadding="0" cellspacing="0" style="line-height: normal;"><tr style="vertical-align:baseline" valign="baseline"><td width="13"><span style="font-size: 10pt; font-family: 'Arial Unicode MS', 'Lucida Sans Unicode', 'Arial'; color: #000000;">&#8226;</span></td><td>%%control:BizFormControl?form1%%</td></tr></table></div><div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 7px;"><table border="0" cellpadding="0" cellspacing="0" style="line-height: normal;"><tr style="vertical-align:baseline" valign="baseline"><td width="13"><span style="font-size: 10pt; font-family: 'Arial Unicode MS', 'Lucida Sans Unicode', 'Arial'; color: #000000;">&#8226;</span></td><td>{^BizFormControl|form1^}</td></tr></table></div><div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 7px;"><table border="0" cellpadding="0" cellspacing="0" style="line-height: normal;"><tr style="vertical-align:baseline" valign="baseline"><td width="13"><span style="font-size: 10pt; font-family: 'Arial Unicode MS', 'Lucida Sans Unicode', 'Arial'; color: #000000;">&#8226;</span></td><td>{^BizFormControl|(formname)form1^}</td></tr></table></div><p>&nbsp;</p>
<p>To learn how to create a new inline control and add it to the system, please see the <a href="http://devnet.kentico.com/docs/6_0/devguide/how_to_develop_inline_controls.htm" target="_blank" class="weblink">Developer's Guide -&gt; Development -&gt; Inline controls -&gt; How to develop inline controls</a> topic.</p>
<p>&nbsp;</p>
<div style="text-align: justify; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table cellspacing="0" cellpadding="10" border="1" style="border: solid 1px #000000; border-spacing:0px;">
<tr style="text-align:left;vertical-align:top;">
<td valign="top" width="57" style="width:57px; border: none"><p style="text-align: justify;"><span style="color: #000000;">&nbsp;</span></p>
<p style="text-align: justify;"><img src="embim51.gif" width="51" height="54" vspace="1" hspace="1" border="0" alt=""></p>
</td>
<td valign="top" width="511" style="width:511px; border: none"><p>&nbsp;</p>
<p><span style="font-weight: bold;">Important!</span></p>
<p>&nbsp;</p>
<p>Inline controls are obsolete and can no longer be added using the WYSIWYG editor toolbar by default. It is recommended to implement your custom controls as <a href="http://devnet.kentico.com/docs/6_0/devguide/widgets_overview.htm" target="_blank" class="weblink">Widgets</a> and insert them into text using the <span style="font-weight: bold;">Insert/Edit widget</span> (<img src="fckinlinewidgets.png" width="13" height="13" border="0" alt="fckInlineWidgets">) button. Further details can be found in the <a href="http://devnet.kentico.com/docs/6_0/devguide/inline_widgets.htm" target="_blank" class="weblink">Inline widgets</a> topic.</p>
<p><span style="color: #000000;">&nbsp;</span></p>
<p>This approach offers several advantages, such as increased flexibility, an unlimited amount of parameters for the controls, and a more user-friendly configuration dialog.</p>
<p>&nbsp;</p>
<p>For the purposes of backward compatibility, existing inline controls are still resolved correctly. If you wish to use inline controls via the WYSIWYG editor, you can enable this functionality by adding the following key into the <span style="font-weight: bold;">configuration/appSettings</span> section of your web.config file:</p>
<p>&nbsp;</p>
<div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table cellspacing="0" cellpadding="12" border="0" style="border: none; border-spacing:0px; border-collapse: collapse;">
<tr style="text-align:left;vertical-align:top;">
<td valign="top" width="445" bgcolor="#d3d3d3" style="width:445px; background-color:#d3d3d3; border: solid 1px #999999;"><p><span style="font-size: 9pt; font-family: 'Courier New'; color: #0000ff;">&lt;</span><span style="font-size: 9pt; font-family: 'Courier New'; color: #a31515;">add</span><span style="font-size: 9pt; font-family: 'Courier New'; color: #0000ff;"> </span><span style="font-size: 9pt; font-family: 'Courier New'; color: #ff0000;">key</span><span style="font-size: 9pt; font-family: 'Courier New'; color: #0000ff;">=</span><span style="font-size: 9pt; font-family: 'Courier New';">"</span><span style="font-size: 9pt; font-family: 'Courier New'; color: #0000ff;">CMSEnableInlineControls</span><span style="font-size: 9pt; font-family: 'Courier New';">"</span><span style="font-size: 9pt; font-family: 'Courier New'; color: #0000ff;"> </span><span style="font-size: 9pt; font-family: 'Courier New'; color: #ff0000;">value</span><span style="font-size: 9pt; font-family: 'Courier New'; color: #0000ff;">=</span><span style="font-size: 9pt; font-family: 'Courier New';">"</span><span style="font-size: 9pt; font-family: 'Courier New'; color: #0000ff;">true</span><span style="font-size: 9pt; font-family: 'Courier New';">"</span><span style="font-size: 9pt; font-family: 'Courier New'; color: #0000ff;"> /&gt;</span></p>
</td>
</tr>
</table>
</div>
<p>&nbsp;</p>
</td>
</tr>
</table>
</div>

<!--ZOOMSTOP--> 

<noscript>
<p class="help-url"><b>Help URL:&nbsp;</b><a href="<%HELP_LOCATION%><%DEVNET_PATH_NAME%>/index.html?inline_controls_overview.htm" target="_top" title="Right-click to copy the URL of this help topic">
<%HELP_LOCATION%><%DEVNET_PATH_NAME%>/index.html?inline_controls_overview.htm</a>
</p>
</noscript>
<script type="text/javascript">
var autoURL = true;
if (autoURL) {
      document.write(getHref("index.html","Help URL:","Right-click to copy the URL of this help topic"));
      } else {
             document.write('<p class="help-url"><b>Help URL:&nbsp;</b>');
             document.write('<a href="<%HELP_LOCATION%><%DEVNET_PATH_NAME%>/index.html?inline_controls_overview.htm" target="_top" title="Right-click to copy the URL of this help topic"><%HELP_LOCATION%><%DEVNET_PATH_NAME%>/index.html?inline_controls_overview.htm</a>');
             document.write('</p>');
      }
</script>

</div></div> 
</body>
</html>





